<template>
	<view class="content">
		<!--签约房屋信息-->
		<view class="content_1">
			<view class="house_view">
				<image class="house_img" :src="houseimg"></image>
				<view class="house_detail">
					<view class="house_name">{{housename}}</view>
					<view class="house_info">{{housetype}}·{{housedirection}}·{{housearea}}</view>
					<view class="house_info">{{housename}}·{{houseadd}}</view>
					<view class="house_tips">
						<block v-for="(item_tips, index_tips) in tipsList" :key='index_tips'>
							<view class="tips">{{item_tips.show_name}}</view>
						</block>
					</view>
					<view class="house_money">¥ {{housemoney}} /月</view>
				</view>
			</view>
		</view>
		<!--签约主体信息-->
		<view class="content_2">
			<view class="title_2">签约主体信息</view>
			<view class="sign_detail" style="margin-top: 20upx;">
				<view class="detail_title">姓名</view>
				<input class="detail_info" placeholder="请输入姓名" style="direction: rtl;" @input="getNameInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">性别</view>
				<input class="detail_info" placeholder="请输入性别" style="direction: rtl;" @input="getSexInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">身份证号码</view>
				<input class="detail_info" placeholder="请输入身份证" style="direction: rtl;" type="idcard" @input="getIdInput"></input>
			</view>
			<view class="sign_detail">
				<view class="detail_title">手机号</view>
				<input class="detail_info" placeholder="请输入电话号码" style="direction: rtl;" type="number" @input="getPhoneInput"></input>
			</view>
			<view class="sign_detail" v-if="renttype == 2">
				<view class="detail_title">选择卧室</view>
				<image class="detail_icon" style="transform: rotate(270deg);" src="../../../../static/index/detail/sign/jiantou.svg"></image>
			</view>
			<!--二级菜单-->
			<!--房间列表-->
			<view class="detail_son" v-if="renttype == 2">
				<block v-for="(badroom, index_badroom) in badroomList" :key='index_badroom'>
					<view class="son_view" @click="chooseRoom(index_badroom)">
						<view class="chooseicon_view" v-if="choosebadroom == index_badroom">
							<view class="chooseicon_son"></view>
						</view>
						<view class="chooseicon_view" style="border:5upx solid #cccccc;" v-if="choosebadroom != index_badroom">
						</view>
						<view class="son_name">{{badroom.show_name}}</view>
					</view>
				</block>
			</view>
			<picker class="sign_detail" @change="pickerChange($event,'renttime')" :value="data.renttime" :range="renttimeList"
			 range-key="show_name">
				<view class="detail_title" style="width: 660upx;">{{renttimeList[data.renttime].show_name}}</view>
				<image class="detail_icon" src="../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<picker class="sign_detail" @change="pickerChange($event,'payfor')" :value="data.payfor" :range="payforList"
			 range-key="show_name">
				<view class="detail_title" style="width: 660upx;">{{payforList[data.payfor].show_name}}</view>
				<image class="detail_icon" src="../../../../static/index/detail/sign/jiantou.svg"></image>
			</picker>
			<!-- 填写验证码 -->
			<view class="sign_detail">
				<view class="detail_title_code" @click="xiaoyan" v-if="Takecode == '0'">获取验证码</view>
				<!--用户点击获取验证码后,等待60s-->
				<view class="detail_title_code" v-if="Takecode == '1'">{{Retaketime}}s</view>
				<view class="detail_right">
					<input class="detail_info" placeholder="请输入验证码" style="direction: rtl;" type="number" @input="getCodeInput"></input>
				</view>
			</view>
		</view>
		<!--底部提交-->
		<view class="content_3">
			<view class="contract_view">
				<view class="contract_icon_view" v-if="readstate == '0'" @click="readContract"></view>
				<view class="contract_icon_view" style="border: 5upx solid #5555FF;" v-if="readstate == '1'" @click="readContract">
					<view class="contract_icon"></view>
				</view>
				<view class="contract" @click="GotoContract">查阅《租赁合同》</view>
			</view>
			<view class="submit" @click="toPay">提交</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				data: {
					renttime: 0,
					payfor: 0,
				},
				renttimeList: [],
				payforList: [],
				houseimg: '',
				housename: '',
				housetype: '',
				housedirection: '',
				housearea: '',
				tipsList: [],
				housemoney: '',
				houseadd: '',
				choosebadroom: '-1',
				readstate: '0',
				badroomList: [],
				housedetailList: [],
				//房源出租类型 1是整租，2是合租
				renttype: '',
				//判断是否已核验用户信息
				autonym_status: false,
				//判断用户验证码是否正确
				inputCode_status: false,
				//是否获取了验证码
				Takecode: '0',
				//重新获取验证码等待时间
				Retaketime: '60'
			}
		},
		methods: {
			//跳转合同页面
			GotoContract: function(){
				uni.navigateTo({
					url: '/pages/mine/web/web?weburl=weburl',
				});
			},
			//picker选择改变
			pickerChange: function(e, val) {
				this.data[val] = e.target.value
				this.rent_id = this.renttimeList[e.target.value].id
				this.way_id = this.payforList[e.target.value].id
			},
			//选择房间(单选)
			chooseRoom: function(index) {
				this.choosebadroom = index
				this.room_id = this.badroomList[index].id
			},
			//阅读合同
			readContract: function() {
				if (this.readstate == '0') {
					this.readstate = '1'
				} else {
					this.readstate = '0'
				}
			},
			//核验用户信息接口
			xiaoyan: function() {
				//正则判断
				let sex = /^男$|^女$/
				let id = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
				let phone = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
				if (this.readstate == '0') {
					new Request().showToast('请查阅《租赁合同》');
					return;
				} else if (this.inputname == '' || this.inputname == null) {
					new Request().showToast('请正确填写姓名');
					return;
				} else if (this.inputsex == '' || this.inputname == null || !sex.test(this.inputsex)) {
					new Request().showToast('请正确填写性别');
					return;
				} else if (this.inputid == '' || this.inputid == null || !id.test(this.inputid)) {
					new Request().showToast('请正确填写身份证');
					return;
				} else if (this.inputphone == '' || this.inputphone == null || !phone.test(this.inputphone)) {
					new Request().showToast('请正确填手机号');
					return;					
				}
				this.Takecode = '1'
				let inputname = this.inputname;
				let inputid = this.inputid;
				let inputphone = this.inputphone;
				let that = this;
				setTimeout(function() {
					that.Takecode = '0'
				}, 60000);
				//周期执行函数的定时器,赋值给timeid,以便clearInterval
				var timeid = setInterval(function() {
					that.Retaketime --
					if (that.Retaketime == '0') {
						clearInterval(timeid)
						that.Retaketime = '60'
					}
				}, 1000)
				
				//核验认证用户个人信息
				let userInfo = function(info) {
					new Request('autonym/Shi_Name/telecomThreeFactors').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								user_name: inputname,
								card_number: inputid,
								user_phone: inputphone,
								openid: app.globalData.openid,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project,
							}
						},
						(res) => {
							if (res.data.code == 0) {
								new Request().showToast(res.data.msg);
								return;
							}
							that.flowId = res.data.data.flowId;
							that.token = res.data.data.token;
							that.autonym_status = true;
							// that.toPay();
						}
					);
				}
				userInfo();
			},
			//跳转支付页面
			toPay: function() {
				//正则判断
				let sex = /^男$|^女$/
				let id = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
				let phone = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
				if (this.readstate == '0') {
					uni.showToast({
						position: 'center',
						title: '请查阅《租赁合同》',
						icon: 'none',
					});
				} else if (this.inputname == '' || this.inputname == null) {
					uni.showToast({
						position: 'center',
						title: '请正确填写姓名',
						icon: 'none',
					});
				} else if (this.inputsex == '' || this.inputname == null || !sex.test(this.inputsex)) {
					uni.showToast({
						position: 'center',
						title: '请正确填写性别',
						icon: 'none',
					});
				} else if (this.inputid == '' || this.inputid == null || !id.test(this.inputid)) {
					uni.showToast({
						position: 'center',
						title: '请正确填写身份证',
						icon: 'none',
					});
				} else if (this.inputphone == '' || this.inputphone == null || !phone.test(this.inputphone)) {
					uni.showToast({
						position: 'center',
						title: '请正确填手机号',
						icon: 'none',
					});
					/*
					 * 判断租客是否选择了房间
					 * */
					// } else if(this.room_id == '' || this.room_id == null || typeof(this.room_id) == 'undefined'){
					// 	uni.showToast({
					// 		position: 'center',
					// 		title: '请选择房间',
					// 		icon: 'none',
					// 	});
					/*
					 * 判断租客是否选择了租期
					 * */
				} else if (this.rent_id == '' || this.rent_id == null || typeof(this.rent_id) == 'undefined') {
					uni.showToast({
						position: 'center',
						title: '请选择租期',
						icon: 'none',
					});
					/*
					 * 判断租客是否选择了扣租方式
					 * */
				} else if (this.way_id == '' || this.way_id == null || typeof(this.way_id) == 'undefined') {
					uni.showToast({
						position: 'center',
						title: '请选择扣租方式',
						icon: 'none',
					});
				} else {
					//判断房源出租类型订单
					if (this.renttype == 2) {
						if (this.room_id == '' || this.room_id == null || typeof(this.room_id) == 'undefined') {
							new Request().showToast('请选择房间');
						}
					} else if (this.renttype == 1) {
						this.room_id = 'whole';
					}
					//认证用户真实信息
					// if (typeof this.autonym_status == 'undefined' || this.autonym_status == false) {
					// 	this.xiaoyan();
					// 	return;
					// }
					//判断用户是否输入了验证码
					if (this.inputCode == '' || this.inputCode == null || typeof this.inputCode == 'undefined') {
						new Request().showToast('请输入验证码');
						return;
					}
					if (this.flowId == '' || this.flowId == null || typeof this.flowId == 'undefined') {
						new Request().showToast('验证码有误');
						return;
					}
					//判断用户验证码是否正确
					let flowId = this.flowId;
					let token = this.token;
					let code = this.inputCode;
					let that = this;
					let userInfo = function(info) {
						new Request('autonym/Shi_Name/telecomThreeFactorsCode').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									flowId: flowId,
									token: token,
									code: code,
									openid: app.globalData.openid,
									DevelopVersion: app.globalData.DevelopVersion,
									project: app.globalData.project,
								}
							},
							(res) => {
								if (res.data.code == 0) {
									new Request().showToast(res.data.msg);
									return;
								}
								new Request('Create_Order_Info/CreateOrder').request(
									() => {
										return 'POST'
									},
									() => {
										return {
											house_id: that.house_id,
											user_name: that.inputname,
											gender: that.inputsex,
											card_number: that.inputid,
											user_phone: that.inputphone,
											room_id: that.room_id,
											rent_id: that.rent_id,
											way_id: that.way_id,
											openid: app.globalData.openid,
											DevelopVersion: app.globalData.DevelopVersion,
											project: app.globalData.project,
										}
									},
									(res) => {
										if(res.data.code == 0){
											new Request().showToast(res.data.msg);
											return;
										}
										console.log(res.data.msg)
										if (res.data.msg == 'room_id') {
											uni.showToast({
												position: 'center',
												title: '请选择房间',
												icon: 'none',
											});
										} else if (res.data.msg == 'rent_id') {
											uni.showToast({
												position: 'center',
												title: '请选择租期',
												icon: 'none',
											});
										} else if (res.data.msg == 'way_id') {
											uni.showToast({
												position: 'center',
												title: '请选择扣租方式',
												icon: 'none',
											});
										} else {
											that.orderid = res.data.order_id
											uni.navigateTo({
												url: '/pages/index/detail/pay/pay?orderid=' + that.orderid + '&openid=' + that.openid +
													'&housedetailList=' + encodeURIComponent(JSON.stringify(that.housedetailList))
											})
										}
									}
								)
							}
						);
					}
					userInfo();
					

					
				}
			},
			//获取用户输入信息
			getNameInput: function(e) {
				this.inputname = e.detail.value
			},
			getSexInput: function(e) {
				this.inputsex = e.detail.value
			},
			getIdInput: function(e) {
				this.inputid = e.detail.value
			},
			getPhoneInput: function(e) {
				this.inputphone = e.detail.value
			},
			getCodeInput: function(e){
				this.inputCode = e.detail.value
			}
		},
		onShow() {
			//选择租期
			new Request('Get_House_Basic/GetHouseBasicRentmoney').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id: this.house_id,
					}
				},
				(res) => {
					this.renttimeList = res.data.data
					this.renttimeList.unshift({
						id: '0',
						show_name: '请选择租期'
					})
				}
			)
			//扣租方式
			new Request('Get_House_Basic/GetHouseBasicWay').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id: this.house_id,
					}
				},
				(res) => {
					this.payforList = res.data.data
					this.payforList.unshift({
						id: '0',
						show_name: '请选择扣租方式'
					})
				}
			)
			//查找剩余房间
			new Request('Get_House_Basic/GetHouseRoom').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id: this.house_id,
					}
				},
				(res) => {
					this.badroomList = res.data.data
				}
			)
			//获取指定id房间
			new Request('Get_House_Info/GetHouseDetailInfo').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						house_id: this.house_id,
						openid: app.globalData.openid
					}
				},
				(res) => {
					console.dir(res.data.house_BasicInfo)
					this.housedetailList = res.data.house_BasicInfo
					this.housename = res.data.house_BasicInfo.house_name
					this.housetype = res.data.house_BasicInfo.house_type
					this.housedirection = res.data.house_BasicInfo.house_direction
					this.housearea = res.data.house_BasicInfo.house_area
					this.tipsList = res.data.house_BasicInfo.house_label
					this.houseimg = res.data.house_BasicInfo.house_image
					this.housemoney = res.data.house_BasicInfo.house_money
					this.houseadd = res.data.house_BasicInfo.house_addr;
					//房源出租类型 1是整租，2是合租
					this.renttype = res.data.house_BasicInfo.renttype_status;
				}
			)
		},
		//拿到detail页面传过来的house_id
		onLoad(option) {
			this.house_id = option.house_id
		}
	}
</script>

<style>
	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		签约主体信息样式
	*/
	.title_2 {
		height: 88upx;
		background-color: #B3E9DC;
		line-height: 88upx;
		padding-left: 28upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.sign_detail {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 28upx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.detail_right{
		height: 37upx;
		display: flex;
		align-items: center;
	}

	.detail_info {
		height: 37upx;
		line-height: 37upx;
		font-size: 28upx;
		color: #999999;
	}
	
	.getCode{
		padding: 0upx 8upx;
		margin-left: 20upx;
		height: 37upx;
		border-radius: 37upx;
		border: solid 2upx #63D0D5;
		font-size: 26upx;
		color: #999999;
	}

	.detail_icon {
		width: 40upx;
		height: 40upx;
		transform: rotate(180deg);
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.detail_son {
		margin: 0upx 30upx;
		padding: 0upx 30upx;
		display: flex;
		flex-direction: column;
	}

	.son_view {
		height: 80upx;
		background-color: #FFFFfF;
		display: flex;
		align-items: center;
	}

	.chooseicon_view {
		height: 30upx;
		width: 30upx;
		margin-right: 30upx;
		border-radius: 30upx;
		display: flex;
		align-items: center;
		border: 5upx solid #5555ff;
	}

	.chooseicon_son {
		height: 20upx;
		width: 20upx;
		border-radius: 20upx;
		margin: 0 auto;
		background-color: #5555ff;
	}

	.son_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #929292;
	}

	/*
		底部提交样式
	*/
	.content_3 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 684upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 70upx;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		height: 40upx;
		line-height: 40upx;
		font-size: 32upx;
		color: #FFFFFF;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
	/* 验证码css */
	.detail_title_code {
		width: 150upx;
		text-align: center;
		border: 1upx #8AE3D7 solid;
		border-radius: 10upx;
		color: #999999;
		padding: 10upx;
		font-size: 28upx;
	}
</style>
